<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <link rel="stylesheet" href="../css/parallax.css">
    <link rel="stylesheet" href="../css/parallax-animation.css"/>
    <style>
        .page1{
            background-color: #bc77fa;
        }
        .page2{
            background-color: #fa9d67;
        }
        .page3{
            background-color: #62ffdb;
        }
        .page4{
            background-color: #ff6fe0;
        }
        .page > span{
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            margin: auto;
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            font-size: 3rem;
            color: #ffffff;
            font-family: "幼圆";
        }
        .box1 {
            width: 100px;
            height: 200px;
            background-color: #ecf0f1;
            position: absolute;
            left: 160px; top: 126px;
        }
        .box2 {
            width: 200px;
            height: 100px;
            background-color: #8e44ad;
            position: absolute;
            left: 60px; top: 226px;
        }
        .box3 {
            width: 100px;
            height: 100px;
            background-color: #34495e;
            position: absolute;
            left: 160px; top: 226px;
        }
        .box4 {
            width: 50px;
            height: 50px;
            background-color: #e74c3c;
            position: absolute;
            left: 185px; top: 250px;
        }

    </style>
</head>
<body>
<div class="wrapper">
    <div class="pages">

        <!-- 第一屏 -->
        <div class="page  page1">
            <div class="box1" data-animation="slideToBottom" data-timing-function="ease-in"></div>
            <div class="box2" data-animation="slideToTop" data-delay="300" data-timing-function="ease-out"></div>
            <div class="box3" data-animation="slideToRight" data-delay="600" data-timing-function="linear"></div>
            <div class="box4" data-animation="slideToLeft" data-delay="900" data-timing-function="cubic-bezier(.12,.73,.62,1.38)"></div>
        </div>

        <!-- 第二屏 -->
        <div class="page  page2">
            <div class="box1" data-animation="followSlide" data-duration="1000"></div>
            <div class="box2" data-animation="followSlide" data-delay="200" data-duration="1000"></div>
            <div class="box3" data-animation="followSlide" data-delay="400" data-duration="1000"></div>
            <div class="box4" data-animation="followSlide" data-delay="600" data-duration="1000"></div>
        </div>

        <!-- 第三屏 -->
        <div class="page  page3">
            <div class="box1" data-animation="fadeInToBottom"></div>
            <div class="box2" data-animation="fadeInToTop" data-delay="200"></div>
            <div class="box3" data-animation="fadeInToLeft" data-delay="400"></div>
            <div class="box4" data-animation="fadeInToRight" data-delay="600"></div>
        </div>
        <!-- 第四屏 -->
        <div class="page  page4">
            <div class="box1" data-animation="fadeIn"></div>
            <div class="box2" data-animation="fadeOut" data-delay="800"></div>
        </div>

        ...

    </div>
</div>

<script  src="../lib/zepto.min.v1.1.6.js"></script>
<script  src="../js/parallax.js"></script>
<script>
    $('.pages').parallax({
        direction:"horizontal",
        swipeAnim:"cover",
        drag:      true,
        indicator: true,
        arrow: true,
        onchange: function(index, element, direction) {
            console.log("当前的页面"+index);
            console.log(element);
            console.log(direction);
        },
        orientationchange: function(orientation) {
        }
    });

</script>
</body>
</html>